/* <%= fontName %> - v.<%= version %> 
 * <%= desc %>
 * <%= year %> (c) <%= author %> - <%= license %>
 * <%= homepage %>
 */
@font-face {
  font-family: "<%= fontName %>";
  src: url('<%= fontPath %><%= fontName %>.eot?t=<%= dtime %>');
  src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('eot'),
    url('<%= fontPath %><%= fontName %>.woff2?t=<%= dtime %>') format('woff2'),
    url('<%= fontPath %><%= fontName %>.woff?t=<%= dtime %>') format('woff'),
    url('<%= fontPath %><%= fontName %>.ttf?t=<%= dtime %>') format('truetype'),
    url('<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

.font-gis {
  width: 1em;
  height: 1em;
}

[class^="<%= className %>-"]:before, [class*="<%= className %>-"]:before {
  font-family: "<%= fontName %>";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  text-align: center;
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="<%= className %>-"] {
  display: inline-block;
}
.<%= className %>-lg {
  font-size: 1.3333333333333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.<%= className %>-2x { font-size: 2em; }
.<%= className %>-3x { font-size: 3em; }
.<%= className %>-4x { font-size: 4em; }
.<%= className %>-5x { font-size: 5em; }
.<%= className %>-fw {
  width: 1.2857142857142858em;
  text-align: center;
}

.<%= className %>-rotate10 {
  -webkit-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
}
.<%= className %>-rotate-10 {
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.<%= className %>-rotate20 {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}
.<%= className %>-rotate-20 {
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
}
.<%= className %>-rotate45 {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.<%= className %>-rotate90 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.<%= className %>-rotate135 {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
.<%= className %>-rotate180 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.<%= className %>-rotate225 {
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}
.<%= className %>-rotate270 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.<%= className %>-rotate315 {
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
}

.<%= className %>-fliph {
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.<%= className %>-flipv {
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}

.<%= className %>-stack {
  position: relative;
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1em;
  vertical-align: middle;
}
.<%= className %>-stack [class^="<%= className %>-"] {
  position: absolute;
}

.<%= className %>-spin {
  -webkit-animation: <%= className %>-spin 2s infinite linear;
  animation: <%= className %>-spin 2s infinite linear;
}
.<%= className %>-pulse {
  -webkit-animation: <%= className %>-spin 1s infinite steps(8);
  animation: <%= className %>-spin 1s infinite steps(8);
}

@-webkit-keyframes <%= className %>-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes <%= className %>-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

<% _.each(glyphs, function(glyph) { %>.<%= className %>-<%= glyph.name %>:before { content: "\<%= glyph.codepoint %>"; }
<% }); %>